.container {
    width: 100%;
    margin-top: 62px;
    position: relative;
    display: flex;

    > .bg {
        width: 100%;
        height: calc(var(--banner-height));
        overflow: hidden;

        > img {
            width: 100%;
        }
    }

    > .content {
        width: 100%;
        padding: 72px 12px;
        position: absolute;
        top: 0;
        background: linear-gradient(to bottom, #ffffffac, #ffffff);

        > .center {
            width: var(--content-width);
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            row-gap: 16px;
            > span {
                font-size: 46px;
                font-weight: bold;
                color: #111111;
            }

            > .user {
                display: flex;
                flex-direction: row;
                align-items: center;
                column-gap: 12px;
                position: relative;

                > span {
                    font-size: 15px;
                    text-decoration: underline;
                    transition: all 0.2s ease;
                    cursor: pointer;

                    &:hover {
                        color: #111111;
                    }
                }

                > .share__btn {
                    display: flex;
                    flex-direction: row;
                    column-gap: 8px;
                    position: absolute;
                    right: 0;
                    bottom: 32px;
                }
            }
        }
    }
}

.num {
    width: var(--content-width);
    font-size: 15px;
    color: #111111;
    padding: 0 12px;
    margin: 0 auto;
    margin-bottom: 24px;
}
